import * as THREE from "three"
import initRenderer from "./core/renderer";
import { model } from "./core/model";
import initScene from "./core/scene";
import { labelRenderer as labelRenderer2D, tag as tag2D } from "./core/tag2D";
import { labelRenderer as labelRenderer3D, tag3D, tag3DSprite } from "./core/tag3D";

class Box {
    private scene;
    private camera;
    private renderer;
    private container;

    constructor(container) {
        this.container = container;
        this.scene = new THREE.Scene();
        this.init();
    }
    init() {
        // 初始化渲染器和相机
        let { renderer, camera, render } = initRenderer({ scene: this.scene, container: this.container, labelRenderer2D: labelRenderer2D(this.container), labelRenderer3D: labelRenderer3D(this.container) });
        this.renderer = renderer;
        this.camera = camera;
        this.renderer.setClearColor("black");

        // 初始化场景
        initScene({ scene: this.scene, container: this.container, renderer: this.renderer, camera: this.camera });

        //初始化模型
        this.initObjects();

        // 开始渲染
        render();
    }

    //绘制
    initObjects() {
        const box = new THREE.BoxGeometry(30, 30, 30);
        box.translate(0, 15, 0)
        const material = new THREE.MeshLambertMaterial({
            color: 0x0000ff
        })
        const mesh = new THREE.Mesh(box, material);

        // -------------------------------------1
        const mesh1 = mesh.clone();
        const mesh11 = mesh.clone();
        mesh11.position.x = 100;
        this.scene.add(mesh1);
        this.scene.add(mesh11);

        // 添加CSS 2DObject标签
        var label2D = tag2D("CSS 2DObject 标签");//把粮仓名称obj.name作为标签
        var pos1 = new THREE.Vector3();
        mesh1.getWorldPosition(pos1);//获取obj世界坐标、
        pos1.y += 30;
        label2D.position.copy(pos1);//标签标注在obj世界坐标
        this.scene.add(label2D);//标签插入model组对象中 

        var label2D1 = tag2D("CSS 2DObject 标签");//把粮仓名称obj.name作为标签
        var pos11 = new THREE.Vector3();
        mesh11.getWorldPosition(pos11);//获取obj世界坐标、
        pos11.y += 30;
        label2D1.position.copy(pos11);//标签标注在obj世界坐标
        this.scene.add(label2D1);//标签插入model组对象中 

        // -------------------------------------2
        const mesh2 = mesh.clone();
        mesh2.position.z = 50;
        const mesh22 = mesh.clone();
        mesh22.position.z = 50;
        mesh22.position.x = 100;
        this.scene.add(mesh2);
        this.scene.add(mesh22);

        // 添加CSS 3DObject标签
        var label3D = tag3D("CSS 3DObject 标签");//把粮仓名称obj.name作为标签
        var pos2 = new THREE.Vector3();
        mesh2.getWorldPosition(pos2);//获取obj世界坐标、
        pos2.y += 30;
        label3D.position.copy(pos2);//标签标注在obj世界坐标
        this.scene.add(label3D);//标签插入model组对象中 

        var label3D2 = tag3D("CSS 3DObject 标签");//把粮仓名称obj.name作为标签
        var pos22 = new THREE.Vector3();
        mesh22.getWorldPosition(pos22);//获取obj世界坐标、
        pos22.y += 30;
        label3D2.position.copy(pos22);//标签标注在obj世界坐标
        this.scene.add(label3D2);//标签插入model组对象中 

        // -------------------------------------3
        const mesh3 = mesh.clone();
        const mesh33 = mesh.clone();
        mesh3.position.z = -50;
        mesh33.position.z = -50;
        mesh33.position.x = 100;
        this.scene.add(mesh3);
        this.scene.add(mesh33);

        // 添加CSS 3DObject标签
        var label3DSprite = tag3DSprite("CSS 3DSprite 标签");//把粮仓名称obj.name作为标签
        var pos3 = new THREE.Vector3();
        mesh3.getWorldPosition(pos3);//获取obj世界坐标、
        pos3.y += 30;
        label3DSprite.position.copy(pos3);//标签标注在obj世界坐标
        this.scene.add(label3DSprite);//标签插入model组对象中 

        var label3DSprite2 = tag3DSprite("CSS 3DSprite 标签");//把粮仓名称obj.name作为标签
        var pos33 = new THREE.Vector3();
        mesh33.getWorldPosition(pos33);//获取obj世界坐标、
        pos33.y += 30;
        label3DSprite2.position.copy(pos33);//标签标注在obj世界坐标
        this.scene.add(label3DSprite2);//标签插入model组对象中 
    }
}

export default Box;